<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>曲线救国</title>
    <style type="text/css">
        html,body{
            height: 100%;
        }
    	body{
    		background: #eee;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
    	}
        #ball{
            width: 50px;
            height: 50px;
            background: green;
            border-radius: 50%;
        }
        .config-panel{
            background: #fff;
            position: absolute;
            right: 0;
            top: 30px;
            padding: 15px;
            font-size: 14px;
        }
        .config-panel span{
            display: inline-block;
            width: 9em;
            text-align: right;
            margin-right: 4px;
        }
        h3{
            text-align: center;
        }
        .control-menu{
            background: #fff;
            padding: 15px;
            display: block;
        }
        .control-menu-hide{
            display: none;
        }
        .control-menu-item{
            display: block;
        }
        canvas{
            box-shadow: rgba(0, 0, 0, .2) 0 0 10px;
            background: #fff;
        }
    </style>
</head>

<body>
    <!--
    <hr>
    <h3>贝赛尔曲线( <span id="bezier-points"></span> )</h3>
    <div id="canvas-container"></div>
    <div id="ball"></div>
    <hr>
    <div>
        <button class="btn" name="play" type="button">开始(play)</button>
        <button class="btn" name="pause" type="button">暂停(pause)</button>
        <button class="btn" name="stop" type="button">停止(stop)</button>
        <button class="btn" name="destroy" type="button">销毁(destory)</button>
    </div>
    <div class="config-panel">
        <p><span>世界坐标：</span><b id="world-space"></b></p>
        <p><span>相对坐标：</span><b id="local-space"></b></p>
        <p><span>参数(name): </span><input type="text" name="name" onfocus="this.value=''" list="name-list">
            <datalist id="name-list">
                <option value="ease">0,0,.25,.1,.25,1,1,1</option>
                <option value="linear">0,0,1,1</option>
                <option value="ease-in">0,0,.42,0,1,1</option>
                <option value="ease-out">0,0,.58,1,1,1</option>
                <option value="ease-in-out">0,0,.42,0,.58,1,1,1</option>
                <option value="0,0,1,0,1,1">二阶</option>
                <option value="0,0,1,0,0,1,1,1">三阶</option>
                <option value="0,0,.1,1,.2,0,.3,.5,.4,0,.5,1,.6,.4,.7,1,.8,0,1,1">九阶</option>
            </datalist>
        </p>
        <p><span>时间(duration): </span><input type="number" name="duration"></p>
        <p><span>缩放坐标(zoom): </span><input type="number" name="zoom"></p>
        <p><span>往返(forward): </span><input type="text" name="forward"></p>
        <p><span>执行次数(count): </span><input type="number" name="count"></p>
        <p><span>自动播放(autoplay): </span><input type="text" name="autoplay"></p>
        <p><span>延迟播放(delay): </span><input type="number" name="delay"></p>
    </div>
    -->
</body>
</html>